<template>
	<view class="home-header-component">
	  <view
			class="city-content"
			@click="$emit('city')"
		>
			<image src="@/static/images/icon_location.png" class="icon-location"></image>
			<view class="city-name">{{ selectCity || currentCity }}</view>
		</view>
	  <view
			class="search-content"
			@click="$emit('search')"
		>
			<image src="@/static/images/icon_search.png" class="icon-search"></image>
			<view class="search-name">搜索您想卖的机型</view>
		</view>
	  <!-- <view
			class="service-content"
			@click="$emit('service')"
		>
			<image src="@/static/images/icon_service.png" class="icon-service"></image>
		</view> -->
	</view>
</template>

<script>
import { mapState } from 'vuex'

export default {
	computed: {
		...mapState({
			userLocation: state => state.userLocation,
			userSelectLocation: state => state.userSelectLocation
		}),
		selectCity () {
			return this.userSelectLocation.cityName
		},
		currentCity () {
			return this.userLocation.address?.city || '加载中'
		}
	}
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>